<template>
	<div>
		<div class="robot-container">
			<div class="robot-avatar"></div>
			<div class="robot-right">
				<div ref="robotAns" class="robot-answer" v-html="content" :class="{ 'input-mark': message.isLoading }"></div>
				<div class="robot-bottom" v-show="!message.isLoading && currentIndex == index">
					<div class="bottom-left">
						<Tooltip :transfer="true" :max-width="350" content="聊天将重新开始，历史记录不会被删除" placement="bottom">
							<Button type="text" @click="clearcontext">清除上下文</Button>
						</Tooltip>
						<Tooltip :transfer="true" :max-width="350" content="重新生成一次回答" placement="bottom">
							<Button type="text" @click="reSend">重新生成</Button>
						</Tooltip>
					</div>
					<div class="bottom-right" v-if="category == 'pure'">
						<div @click="bobao" v-if="!isAudio">
							<BoBao width="1rem" height="1rem" title="播放"></BoBao>
						</div>
						<div @click="stopAudio" v-else>
							<StopVideo width="1rem" height="1rem" title="停止播放"></StopVideo>
						</div>
						<div :class="'copybtn' + index">
							<FuZhi width="1rem" height="1rem" title="复制"></FuZhi>
						</div>
						<div v-if="message.islike" @click="dolike">
							<DianZan1 width="1rem" height="1rem" title="喜欢"></DianZan1>
						</div>
						<div v-else @click="dolike">
							<DianZan width="1rem" height="1rem" title="喜欢"></DianZan>
						</div>
						<div v-if="message.isunlike" @click="dounlike">
							<FanDui1 width="1rem" height="1rem" title="不喜欢"></FanDui1>
						</div>
						<div v-else @click="dounlike">
							<FanDui width="1rem" height="1rem" title="不喜欢"></FanDui>
						</div>
						<!-- <img :src="copyIcon" width="16"  /> -->
						<!-- <img :src="message.islike ? likeIcon_a : likeIcon" width="16" @click="dolike" />
					<img :src="message.isunlike ? unlikeIcon_a : unlikeIcon" width="16" @click="dounlike" /> -->
					</div>
					<div class="bottom-right" v-else>
						<div class="createDate">{{ createDate }}</div>
					</div>
				</div>
				<div v-if="category != 'pure'" class="tool_panel">
					<div @click="bobao" v-if="!isAudio">
						<BoBaoV1 width="2.33rem" height="2.33rem" title="播放"></BoBaoV1>
					</div>
					<div @click="stopAudio" v-else>
						<TingZhi width="2.33rem" height="2.33rem" title="停止播放"></TingZhi>
					</div>
					<div :class="'copybtn' + index">
						<FuZhiV1 width="1.33rem" height="1.33rem" title="复制"></FuZhiV1>
					</div>
					<div v-if="message.islike" @click="dolike">
						<DianZanV1_1 width="1.27rem" height="1.33rem" title="喜欢"></DianZanV1_1>
					</div>
					<div v-else @click="dolike">
						<DianZanV1 width="1.27rem" height="1.33rem" title="喜欢"></DianZanV1>
					</div>
					<div v-if="message.isunlike" @click="dounlike">
						<FanDuiV1_1 width="1.27rem" height="1.33rem" title="不喜欢"></FanDuiV1_1>
					</div>
					<div v-else @click="dounlike">
						<FanDuiV1 width="1.27rem" height="1.33rem" title="不喜欢"></FanDuiV1>
					</div>
					<div v-if="currentIndex != index" @click="deleteMsg">
						<Delete width="2.33rem" height="2.33rem" title="删除"></Delete>
					</div>
				</div>
				<div class="robot-sug" v-show="!message.isLoading && currentIndex == index && category == 'pure'">
					<div class="sug_divide"></div>
					<suggestion :list="message.suglist" @on-suggestion="handelSug"></suggestion>
				</div>
			</div>
		</div>
		<div class="explore_sug" v-show="!message.isLoading && currentIndex == index && category != 'pure'">
			<suggestion :list="message.suglist" @on-suggestion="handelSug"></suggestion>
		</div>
	</div>
</template>
<script>
import { formatCode } from './util'
import FuZhi from '@/components/svg/fuzhi.vue'
import DianZan from '@/components/svg/dianzan.vue'
import DianZan1 from '@/components/svg/dianzan1.vue'
import FanDui from '@/components/svg/fandui.vue'
import FanDui1 from '@/components/svg/fandui1.vue'
import BoBao from '@/components/svg/bobao.vue'
import BoBaoV1 from '@/components/svg/v1/bobao.vue'
import FuZhiV1 from '@/components/svg/v1/fuzhi.vue'
import DianZanV1 from '@/components/svg/v1/dianzan.vue'
import DianZanV1_1 from '@/components/svg/v1/dianzan1.vue'
import FanDuiV1 from '@/components/svg/v1/fandui.vue'
import FanDuiV1_1 from '@/components/svg/v1/fandui1.vue'
import Delete from '@/components/svg/v1/delete.vue'
import StopVideo from '@/components/svg/stopvideo.vue'
import TingZhi from '@/components/svg/tingzhi.vue'
// import copyIcon from '@/assets/images/chat/fuzhi.svg'
// import likeIcon from '@/assets/images/chat/dianzan.svg'
// import likeIcon_a from '@/assets/images/chat/dianzan1.svg'
// import unlikeIcon from '@/assets/images/chat/fandui.svg'
// import unlikeIcon_a from '@/assets/images/chat/fandui1.svg'
// import 'highlight.js/styles/monokai-sublime.css'

import Suggestion from './suggestion.vue'
import Clipboard from 'clipboard'
import { parseTime } from '@/libs/tools'

export default {
	components: {
		FuZhi,
		DianZan,
		DianZan1,
		FanDui,
		FanDui1,
		BoBao,
		BoBaoV1,
		FuZhiV1,
		DianZanV1,
		FanDuiV1,
		DianZanV1_1,
		FanDuiV1_1,
		StopVideo,
		Delete,
		Suggestion,
		TingZhi
	},
	props: {
		message: {
			type: Object,
			default: () => {
				return {
					content: ''
				}
			}
		},
		index: {
			type: Number,
			default: 0
		},
		currentIndex: {
			type: Number,
			default: 0
		},
		category: {
			type: String,
			default: 'pure'
		}
	},
	computed: {
		content() {
			return formatCode(this.message.content)
		},
		createDate() {
			return parseTime(this.message.createDate, 'yyyy-MM-dd hh:mm:ss')
		}
	},
	data() {
		return {
			// copyIcon,
			// likeIcon,
			// unlikeIcon,
			// likeIcon_a,
			// unlikeIcon_a,
			clipboard: null,
			isAudio: false
		}
	},

	methods: {
		reSend() {
			this.$emit('on-resend')
		},
		clearcontext() {
			this.$Modal.confirm({
				title: '提示',
				content: `清除上下文后聊天将重新开始，历史对话记录不会被删除。`,
				onOk: () => {
					this.$emit('on-clear-context')
				}
			})
		},
		dolike() {
			if (!this.message.isunlike) {
				this.$emit('on-like')
			}
		},
		dounlike() {
			if (!this.message.islike) {
				this.$emit('on-unlike')
			}
		},
		handelSug(item) {
			this.$emit('on-suggestion', item)
		},
		async bobao() {
			this.isAudio = true
			await chrome.webview.hostObjects.chatHelper.TTSAsync(this.message.content)
			this.$emit('on-audio')
		},
		deleteMsg() {
			this.$Modal.confirm({
				title: '警告',
				content: `将同时删除输入提示和输出补全，请确认是否删除？`,
				onOk: () => {
					this.$emit('on-delete', this.message.id)
				}
			})
		},
		async stopAudio() {
			this.isAudio = false
			await chrome.webview.hostObjects.chatHelper.StopTTSAsync()
		},
		setAudioIcon(flag) {
			this.isAudio = flag
		}
	},

	mounted() {
		let self = this
		let clipboard = new Clipboard('.copybtn' + self.index, {
			// target: function (trigger) {
			// 	return self.$refs.robotAns
			// }
			text: function (trigger) {
				return self.message.content
			}
		})
		clipboard.on('success', function (e) {
			self.$Message.success({
				content: '复制成功'
			})
			e.clearSelection()
		})

		clipboard.on('error', function (e) {
			console.log(e)
			self.$Message.error({
				content: '复制失败'
			})
		})
		this.clipboard = clipboard
		window.setAudioIcon = (param) => {
			this.setAudioIcon(param)
		}
	},
	destroyed() {
		this.clipboard.destroy()
	}
}
</script>

<style lang="less" scoped>
.robot-container {
	display: flex;
	margin-bottom: 1.5rem;
	.robot-right {
		background: var(--chat-answer-bg);
		box-shadow: var(--chat-answer-shadow);
		border-radius: 1rem;
		padding-bottom: 1rem;
		position: relative;
		word-break: break-all;
		.robot-bottom {
			display: flex;
			align-items: center;
			margin-top: 0.5rem;
			.bottom-left {
				padding-left: 1.5rem;
				font-size: 1.13rem;
				/deep/.ivu-btn {
					color: #2b77ff;
					padding: 0;
					margin-right: 1.6rem;
					background: none;
				}
				/deep/.ivu-btn:hover {
					background: none;
				}
			}

			.bottom-right {
				margin-left: auto;
				padding-right: 1.5rem;
				display: flex;
				div {
					margin-left: 1rem;
					cursor: pointer;
				}
				.createDate {
					font-family: PingFangSC-Regular;
					font-size: 1.17rem;
					color: #999999;
					letter-spacing: 0;
					font-weight: 400;
					cursor: default;
				}
			}
		}
		@keyframes cursor-blink {
			0%,
			100% {
				opacity: 1;
			}

			50% {
				opacity: 0;
			}
		}
		.input-mark > :not(ol):not(ul):not(pre):last-child:after,
		.input-mark > ol:last-child > li:last-child:after,
		.input-mark > pre:last-child code .code-txt-body:after,
		.input-mark > ul:last-child > li:last-child:after {
			-webkit-animation: blink 1s steps(5, start) infinite;
			animation: cursor-blink 1s infinite;
			content: '▋';
			margin-left: 0.25rem;
			vertical-align: baseline;
		}
		.robot-sug {
			.sug_divide {
				border: 1px dashed rgba(235, 235, 235, 1);
				margin: 0 1.5rem;
				margin-top: 1rem;
			}
		}
		.robot-answer {
			padding: 1rem;
			padding-bottom: 0;
			line-height: 2rem;
			font-family: PingFangSC-Regular;
			color: var(--chat-answer-color);
			opacity: var(--chat-answer-opacity);
			/deep/ p {
				line-height: 2rem;
				font-weight: 400;
				font-size: 1.13rem;
				letter-spacing: 0;
			}
			/deep/ div {
				font-size: 1.13rem;
				letter-spacing: 0;
			}
			/deep/ div code {
				word-break: break-all;
				white-space: break-spaces;
				.code-txt-container {
					white-space: pre;
					word-break: initial;
				}
			}
			/deep/ ul,
			/deep/ ol {
				padding-left: 18px;
			}
			/deep/ li {
				list-style: disc;
				font-size: 1.13rem;
				color: var(--chat-answer-color);
				letter-spacing: 0;
				line-height: 2rem;
			}
			/deep/ td,
			/deep/ th {
				border: 1px solid #f0f0f0;
				padding: 10px 16px;
			}
			/deep/ th {
				background-color: var(--chat-answer-th);
				font-weight: bolder;
			}
			/deep/code {
				padding: 0 1.5rem;
			}
			/deep/code .code-txt-head {
				display: flex;
				background: #e3e9f5;
				align-items: center;
				justify-content: space-between;
				padding: 0.4rem 1rem;
				border-radius: 0.5rem 0.5rem 0rem 0rem;
				font-family: ChalkboardSE-Regular;
				font-size: 1.13rem;
				color: #333333;
				letter-spacing: 0;
				line-height: 2rem;
				font-weight: 400;
			}
			/deep/code .code-txt-head .copy-btn {
				font-family: PingFangSC-Regular;
				font-size: 1rem;
				color: #727b8d;
				letter-spacing: 0;
				font-weight: 400;
				cursor: pointer;
			}
			/deep/code .code-txt-body {
				padding: 2.07rem;
				background: #eef1f8;
				border-radius: 0rem 0rem 0.67rem 0.67rem;
				white-space: pre-wrap;
			}
		}
	}
	.tool_panel {
		display: flex;
		align-items: center;
		background: var(--chat-tool-bg);
		box-shadow: 0rem 0rem 0.42rem 0rem var(--chat-tool-shadow);
		border-radius: 1rem;
		height: 3rem;
		padding-left: 1rem;
		position: absolute;
		right: 1.58rem;
		bottom: -1.33rem;
		opacity: 0;
		div {
			margin-right: 1rem;
			cursor: pointer;
			display: flex;
			align-items: center;
		}
	}
	.robot-right:hover {
		.tool_panel {
			opacity: 1;
		}
	}
}
html[data-theme='dark'] .robot-container {
	.robot-answer {
		/deep/code .code-txt-body {
			background-color: #3d3f45;
		}
		/deep/code .code-txt-head {
			background-color: #777b83;
			color: rgba(255, 255, 255, 0.9);
			.copy-btn {
				color: rgba(255, 255, 255, 0.9);
			}
		}
	}
	.robot-right .robot-sug .sug_divide {
		border: 1px dashed rgba(235, 235, 235, 0.3);
	}
}
.explore_sug {
	background: var(--chat-answer-bg);
	box-shadow: 0rem 0rem 0.33rem 0rem rgba(221, 215, 206, 0.52);
	border-radius: 0.83rem;
	padding: 1rem 0;
}
</style>
